﻿@page "/components/notification"

<PageHeader Title="消息通知">
    轻量级的全局消息提示和确认机制，出现和消失时需要有缓动动画。
</PageHeader>

<Example Title="基础的消息通知">
    <RunContent>
        <Notification Title="默认消息">
            这是一条默认的通知消息
        </Notification>
        <br/>
        <Notification Title="普通消息" Theme="Theme.Primary">
            这是一条普通的通知消息
        </Notification>
        <br/>
        <Notification Title="警告消息" Theme="Theme.Warning">
            这是一条警告的通知消息
        </Notification>
        <br />
        <Notification Title="错误消息" Theme="Theme.Danger">
            这是一条错误的通知消息
        </Notification>
        <br />
        <Notification Title="成功消息" Theme="Theme.Success">
            这是一条成功的通知消息
        </Notification>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Notification Title=""默认消息"">
    这是一条默认的通知消息
</Notification>

<Notification Title=""普通消息"" Theme=""Theme.Primary"">
    这是一条普通的通知消息
</Notification>

<Notification Title=""警告消息"" Theme=""Theme.Warning"">
    这是一条警告的通知消息
</Notification>

<Notification Title=""错误消息"" Theme=""Theme.Danger"">
    这是一条错误的通知消息
</Notification>

<Notification Title=""成功消息"" Theme=""Theme.Success"">
    这是一条成功的通知消息
</Notification>
```
")
    </CodeContent>
</Example>
<Example Title="自定义图标">
    <Description>设置 <code>Icon</code> 自定义图标</Description>
    <RunContent>
        <Notification Title="确定消息" Theme="Theme.Primary" Icon="IconName.Help">
            这是一条需要确认的通知消息
        </Notification>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Notification Title=""确定消息"" Theme=""Theme.Primary"" Icon=""IconName.Help"">
    这是一条需要确认的通知消息
</Notification>
```
")
    </CodeContent>
</Example>

<Example Title="带操作的消息通知">
    <Description>带有操作的消息通知为用户提供下一步行动点，在消息提示框中进行简要快捷的交互。</Description>
    <RunContent>
        <Notification Title="超长文本省略号显示" Theme="Theme.Primary">
            <ChildContent>
                文案不限长度，但在实际使用时建议文案显示内容不易过多，建议最大展示行数数量以三行为宜，最后一行折行末尾处超出文本建议会变为省略号显示，这样的话就需要使用详情。
            </ChildContent>
            <OperationContent>
                <NotificationDetailItem>
                    <Link Theme="Theme.Primary">查看详情</Link>
                </NotificationDetailItem>
            </OperationContent>
        </Notification>
        <br/>
        <Notification Theme="Theme.Warning">
            <TitleContent>
                消息通知 <small>这里是副标题</small>
            </TitleContent>
            <ChildContent>
                1. 使用插槽自定义标题 2. 使用插槽自定义底部内容
            </ChildContent>
            <OperationContent>
                <Button Type="ButtonType.Text">取消</Button>
                <Button Theme="Theme.Primary" Type="ButtonType.Text">稍后提醒我(10s)</Button>
            </OperationContent>
        </Notification>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Notification Title=""超长文本省略号显示"" Theme=""Theme.Primary"">
    <ChildContent>
        文案不限长度，但在实际使用时建议文案显示内容不易过多，建议最大展示行数数量以三行为宜，最后一行折行末尾处超出文本建议会变为省略号显示，这样的话就需要使用详情。
    </ChildContent>
    <OperationContent>
        <NotificationDetailItem>
            <Link Theme=""Theme.Primary"">查看详情</Link>
        </NotificationDetailItem>
    </OperationContent>
</Notification>

<Notification Theme=""Theme.Warning"">
    <TitleContent>
        消息通知 <small>这里是副标题</small>
    </TitleContent>
    <ChildContent>
        1. 使用插槽自定义标题 2. 使用插槽自定义底部内容
    </ChildContent>
    <OperationContent>
        <Button Type=""ButtonType.Text"">取消</Button>
        <Button Theme=""Theme.Primary"" Type=""ButtonType.Text"">稍后提醒我(10s)</Button>
    </OperationContent>
</Notification>
```
")
    </CodeContent>
</Example>

        <h2>通过服务调用</h2>
        代码建设中...